<template>
  <div id="Fun">
    <div class="BaseFun" name='Window'>
        <img :src="data.headphoto" class="headphoto" @click="toPersonal(data.uid)"/>
        <button v-for="item in FunData" :key="item.id" class="BaseFunButtonBox flex overflow">
             <i :class="item.class" v-if="item.state == 0" @click.stop="likecollect_('collect', 'add')" />
             <i :class="item.class" v-else-if="item.state == 1"  @click.stop="likecollect_('collect', 'add')"  :style='getColor(item.activeColor)' />
             <div class="count overflow" v-if="item.value">
                    {{ item.value | count() }}
             </div>
        </button>
         
    </div>   
    <div  class="OtherFun" name='Mobile'>

          <div v-if="data.formState">
                  <button v-for="item in OtherFun" :key="item.id" class="OtherFunButtonBox flex overflow">
                      <i :class="item.class"  />
                </button>
            </div>
        
            <font-awesome-icon icon="up-right-and-down-left-from-center" class="OtherFunButtonBox icon"
            v-if="data.formState==0"  @click="unfold"/> 
            <font-awesome-icon icon="down-left-and-up-right-to-center" class="OtherFunButtonBox icon"
            v-else  @click="zoom"/>    

    </div>


  </div>
</template>
<script>
export default {
  name: "",
  props:['data','CardId','CardsId','index'],
  methods:{
      init(){
          this.FunData[0].state=this.data.extra.collectstate
          this.FunData[0].value= this.data.extra.collectcount
          this.FunData[1].state=this.data.extra.likestate
          this.FunData[1].value= this.data.extra.likecount
      },
      getColor:color => {
        return {color:color}
      } ,
      unfold(){
            this.data.formState=1    
            this.$emit('unfold',this.CardId,this.CardsId,this.index)
        },
        zoom(){
            this.data.formState=0
            this.$emit('zoom',this.CardId,this.CardsId,this.index)
        },
      toPersonal(uid){
        this.$public.ToPersonal(uid)
      }
  },
  data() {
    return {
        FunData:[
            {id:1,class:'fa fa-star icon',activeColor:'orange',value:0,state:0},
            {id:2,class:'fa fa-heart icon',activeColor:'red',value:0,state:0},
            // {id:3,class:'fa fa-heart icon',activeColor:'red',value:0,isBaseFun:false},
        ],
        OtherFun:[
            //  {id:1,class:'fa fa-heart icon',activeColor:'red'},
        ]
    }
  },
  mounted() {
     this.init()
  },
};
</script>
<style scoped lang='less'> 
// i{
//   color: white;
// }
#Fun{
    margin-top: 15px;
	  width: 100%;
	  display: flex;
	   justify-content:space-between;
}
.icon{
    font-size: 20px;
    
}
.headphoto{
  margin-right: 30px;
}


.BaseFun,.OtherFun{
 	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
  overflow: hidden;
  // margin-right: 20px;
}

 
.BaseFunButtonBox{
      width: 100px;
      flex-wrap: nowrap;
      justify-content: flex-start;
      
      .count{
        // color: white;
        font-size: 18px; 
        margin-left:10px;
      }
}
.OtherFunButtonBox{
  width: 50px;
}

</style>